<template>
	<view class="main shoppingCart-main">
		<NavigationBar title="购物车" :showGoBack="false" />
		<view class="scroll-wrap">
			<view class="shoppingCart-list">
				<view class="list-item" v-for="(shopItem,shopIndex) in list" :key="shopIndex">
					<view class="item-wrap">
						<view class="left-wrap flex-center" @click="shopItemChoiceAction(shopIndex)">
							<text class="iconfont select-icon" v-if="!shopItem.checked">&#xe62d;</text>
							<text class="iconfont select-icon active-icon" v-if="shopItem.checked">&#xe6a7;</text>
						</view>
						<view class="center-wrap">
							<text class="iconfont shop-icon">&#xe628;</text>
							<text class="shop-name">{{shopItem.shopName}}</text>
							<text class="iconfont arrow-right-icon">&#xe60a;</text>
						</view>
					</view>
					<view class="item-wrap goods-wrap" v-for="(goodsItem,goodsIndex) in shopItem.shop"
						:key="goodsIndex">
						<view class="left-wrap flex-center" @click="goodsItemChoiceAction(shopIndex,goodsIndex)">
							<text class="iconfont select-icon" v-if="!goodsItem.checked">&#xe62d;</text>
							<text class="iconfont select-icon active-icon" v-if="goodsItem.checked">&#xe6a7;</text>
						</view>
						<view class="center-wrap">
							<image class="goods-img" :src="goodsItem.imgUrl"></image>
						</view>
						<view class="right-wrap">
							<view class="name txt-overflow-m">{{goodsItem.title}}</view>
							<view class="specs">{{goodsItem.specs}}</view>
							<view class="price_line">
								<view class="price">
									<text class="Symbol">¥</text>
									<text class="price-num">{{goodsItem.price}}</text>
									<text class="Symbol">.00</text>
								</view>
								<view class="number-box">
									<text class="iconfont number-icon">&#xe63c;</text>
									<text class="num">{{goodsItem.count}}</text>
									<text class="iconfont number-icon">&#xe613;</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-wrap">
			<view class="left" @click="choiceAction">
				<text class="iconfont select-icon" v-if="!isAllChecked">&#xe62d;</text>
				<text class="iconfont select-icon active-icon" v-if="isAllChecked">&#xe6a7;</text>
				<text>全选</text>
			</view>
			<view class="center">总计: <text class="total-price">¥716.50</text></view>
			<view class="right">
				<view class="btn flex-center">
					<text class="btn-text">去结算(3件)</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import Vue from 'vue';
	export default Vue.extend({
		data() {
			return {
				list: [{
					shopName: '萩嫒旗舰店',
					shop: [{
						title: '萩嫒2021夏装新款时尚印花上衣+花边半身裙两件套女装套装GD317-B1#3603# 黑色 XL',
						specs: '【果汁清香】青提+葡萄',
						price: '200',
						count: '2',
						imgUrl: '//img10.360buyimg.com/mobilecms/s234x234_jfs/t1/156004/20/18133/489065/605b2fc7Ebf26f88c/18e6afa64e3e1628.jpg!q70.dpg.webp'
					}, {
						title: '萩嫒今年流行风衣女装2021新款韩版春季春秋chic小个子150cm常规款修身外套GT11#496 卡其色 ',
						specs: '【果汁清香】青提+葡萄',
						price: '200',
						count: '2',
						imgUrl: '//img10.360buyimg.com/mobilecms/s234x234_jfs/t1/168088/22/6142/397310/60264b11E06440ead/cbdc507134d398e4.jpg!q70.dpg.webp'
					}]
				}, {
					shopName: '骏远服饰专营店',
					shop: [{
						title: '萩嫒2021夏装新款时尚印花上衣+花边半身裙两件套女装套装GD317-B1#3603# 黑色 XL',
						specs: '【果汁清香】青提+葡萄',
						price: '200',
						count: '2',
						imgUrl: '//img10.360buyimg.com/mobilecms/s234x234_jfs/t1/168878/35/3729/246550/6009497fEf7af4574/ca6b688e719cc17f.jpg!q70.dpg.webp'
					}]
				}],
				isAllChecked: true
			}
		},
		onLoad(option: any) {
			const _this: any = this
			console.log(option)
			_this.initDataAction()
		},
		methods: {
			initDataAction() {
				this.list.map((shopItem: any) => {
					shopItem.checked = true
					let goods = shopItem.shop
					goods.map((goodsItem: any) => {
						goodsItem.checked = true
						return goodsItem
					})
					return shopItem
				})
			},
			shopItemChoiceAction(shopIndex: any) {

				let shopItem: any = this.list[shopIndex]
				let goods = shopItem.shop
				shopItem.checked = !shopItem.checked

				goods.map((goodsItem: any) => {
					goodsItem.checked = shopItem.checked
					return goodsItem
				})

				this.$set(this.list, shopIndex, shopItem)

				this.isAllChecked = true
				this.list.map((shopItem: any) => {
					if (!shopItem.checked) this.isAllChecked = false
				})

			},
			goodsItemChoiceAction(shopIndex: any, goodsIndex: any) {
				let shopItem: any = this.list[shopIndex]
				shopItem.checked = true
				let goods = shopItem.shop
				goods.map((goodsItem: any, index: any) => {
					if (goodsIndex == index) {
						goodsItem.checked = !goodsItem.checked
					}
					if (!goodsItem.checked) shopItem.checked = false
					return goodsItem
				})
				this.$set(this.list, shopIndex, shopItem)

				this.isAllChecked = true
				this.list.map((shopItem: any) => {
					if (!shopItem.checked) this.isAllChecked = false
				})
			},
			choiceAction() {
				this.isAllChecked = !this.isAllChecked
				this.list.map((shopItem: any) => {
					shopItem.checked = this.isAllChecked
					let goods = shopItem.shop
					goods.map((goodsItem: any) => {
						goodsItem.checked = this.isAllChecked
						return goodsItem
					})
					return shopItem
				})
				console.log(this.list)
			}
		}
	});
</script>

<style lang="scss">
	@import "./shoppingCart.scss";
</style>
